<template>
    <div>
        <Tabs type="card" @on-click="onClick">
            <TabPane label="产品" name="pro">
                <Tree :data="proList" :render="renderContent"></Tree> 
            </TabPane>
            <TabPane label="新闻" name="news">
                <Tree :data="newsList" :render="renderContent"></Tree> 
            </TabPane>
        </Tabs>
        <Modal
            v-model="modal1"
            title="Modal dialog"
            @on-ok="ok"
            @on-cancel="cancel">
            <p>确认删除吗？</p>
        </Modal>
         <Modal
            v-model="modal2"
            title="ADD ITEM">
            <Form  ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="80">
                <FormItem label="Item1" prop="item1">
                    <Input v-model="formItem.item1" placeholder="Enter Item1"></Input>
                </FormItem>
                <FormItem label="Item2" prop="item2">
                    <Input v-model="formItem.item2" placeholder="Enter Item2"></Input>
                </FormItem>
                <FormItem label="Item3" prop="item3">
                    <Input v-model="formItem.item3" placeholder="Enter Item3"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formItem')">Submit</Button>
                    <Button type="primary" @click="handleReset('formItem')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
           <div slot="footer">
                <Button type="primary" @click="handleCancel">Cancel</Button>
           </div>
        </Modal>
         <Modal
            v-model="modal3"
            title="UPDATE ITEM">
            <Form  ref="formItem2" :model="formItem2" :rules="ruleValidate2" :label-width="80">
                <FormItem label="Item" prop="item12">
                    <Input v-model="formItem2.item12" ></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit2('formItem2')">Submit</Button>
                    <Button type="primary" @click="handleReset('formItem2')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
           <div slot="footer">
            <Button type="primary" @click="handleCancel">Cancel</Button>
        </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                proList:[],
                newsList:[],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                },
                type:'',
                modal1:false,
                modal2:false,
                modal3:false,
                ROOT:[],
                NODE:{},
                DATA:{},
                DATA2:{},
                DATA3:{},
                pORc:0,//添加是否是子节点，0同级1子节点
                formItem: {
                    item1: '',
                    item2: '',
                    item3: '',
                },
                ruleValidate: {
                    item1: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    item2: [
                        { },
                    ],
                    item3: [
                        { }
                    ]
                },
                formItem2: {
                    item12: '',
                },
                ruleValidate2: {
                    item12: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        //添加子节点
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { 
                                    this.pORc=1;//添加的是子节点
                                    this.modal2 = true;
                                    this.DATA2=data;
                                    }
                            }
                        }),
                        //删除按钮
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { 
                                    this.modal1 = true;
                                    this.ROOT=root;
                                    this.NODE=node;
                                    this.DATA=data;  
                                }
                            }
                        }),
                        //添加同级按钮
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add-circle'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { 
                                    this.pORc=0;
                                    this.modal2 = true;
                                    this.DATA2=data;
                                }
                            }
                        }),
                        //编辑按钮
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-help'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { 
                                    this.modal3 = true;
                                    this.DATA2=data;
                                    this.formItem2.item12=data.title;
                                }
                            }
                        }),
                    ])
                ]);
            },
            append (data) {
                this.addNode(data.type,data.expand,data._id,data.parentId);
            },
            remove (root, node, data) {
                if(data.children){
                    for(var i=0;i<data.children.length;i++){
                        this.deleteNode(data.children[i]._id,data.type);
                    }
                    this.deleteNode(data._id,data.type);
                }else{
                    this.deleteNode(data._id,data.type);
                }
                
            },
            update (data) {
                data.title=this.formItem2.item12;
                console.log(data);
                this.updateList(data);
            },
            //获取新闻、产品目录
            getlist(type){                
                this.axios({
                    url:`${config.dataBaseUrl}cate/list/${type}`,
                    method:'post',
                }).then(res=>{ 
                    if(type == 'pro'){
                        this.proList=res.data;
                    }else if(type == 'news'){
                        this.newsList=res.data;
                    }
                });   
            },
            //tab切换
            onClick(name){
                this.type=name;
            },
            //删除一个节点
            deleteNode(id,type){
                this.axios({
                    url:`${config.dataBaseUrl}cate/${id}`,
                    method:'delete',
                }).then(res=>{ 
                    this.$Message.info('Delete successful');
                    this.getlist(type);
                });  
            },
            //modal1事件
            ok () {
                this.remove(this.ROOT,this.NODE,this.DATA);
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            //modal2事件
            handleSubmit(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.modal2 = false;
                        this.append(this.DATA2);
                    } else {
                        this.$Message.error('Fail!');
                    }
                });
                this.handleReset('formItem');
            },
            handleCancel(){
                this.modal2 = false;
                this.modal3 = false;
                this.$Message.info('Clicked cancel');
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            //添加一个节点
            addNode(type,expand,_id,parentId){ 
                for(var i in this.formItem){
                    if(this.formItem[i]){
                        var nodeDate={};
                        nodeDate.title=this.formItem[i];
                        nodeDate.type=type;
                        nodeDate.expand=expand;
                        if(this.pORc == 0){//添加同级
                            nodeDate.parentId = parentId;
                        }else{//添加子节点
                            nodeDate.parentId = _id;
                        }
                        this.axios({
                            url:`${config.dataBaseUrl}cate`,
                            method:'post',
                            data:nodeDate
                        }).then(res=>{ 
                            this.$Message.info('ADD successful');
                            this.getlist(nodeDate.type);
                        });

                    }
                }
            },
            //modal3事件
            handleSubmit2(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.modal3 = false;
                        this.update(this.DATA2);
                    } else {
                        this.$Message.error('Fail!');
                    }
                });
                this.handleReset('formItem2');
            },
            //更新列表
            updateList(data){
                var nodeDate={};
                nodeDate.title=data.title;
                nodeDate.type=data.type;
                nodeDate.expand=data.expand;
                nodeDate.parentId=data.parentId;
                nodeDate.path=data.path;
                nodeDate._id=data._id;
                this.axios({
                    url:`${config.dataBaseUrl}cate/${nodeDate._id}`,
                    method:'put',
                    data:nodeDate
                }).then(res=>{ 
                    this.$Message.info('UPDATE successful');
                });
            }
        },
        //页面加载时触发
        mounted () {
            this.getlist("news");
            this.getlist("pro");
        }
    }
</script>
